<template>
  <el-dialog
      :title="'Add ' + type"
      width="500px"
      @open="getList"
      :visible.sync="dialogVisible">
    <div v-loading="loading">
      <ExpandCascader v-model="value"
                      :options="options"
                      style="width: 100%"
                      popper-class="dataset_data_grounp_cascader"
                      :props="{ expandTrigger: 'hover', virtual: true }"
                      v-loading='loading'
                      clearable
                      @change="onSelectChange"
                      @clear="handleClear"
                      :filter-method="filterMethod"
                      filterable
                      >
      </ExpandCascader>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">Cancel</el-button>
      <el-button size="small" type="primary" @click="submit">Confirm</el-button>
    </span>
  </el-dialog>
</template>

<script>
import ExpandCascader from '@/components/expand-cascader'
export default {
  name: "add-url",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    type: String
  },
  components: {
    ExpandCascader
  },
  data () {
    return {
      loading: false,
      props: { multiple: true },
      options: [],
      value: []
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    submit () {
      if (this.value.length === 0) {
        return this.$message.error('Please Select')
      }
      // const data = this.value.map(item => {
      //   return item[1]
      // })
      this.$emit('submit', {
        resourceId: this.value[1]
      })
    },
    onSelectChange (val) {
    },
    handleClear () {
      this.value = []
    },
    filterMethod (node, keyword) {
      return node.text.toLowerCase().indexOf(keyword.toLowerCase()) !== -1
    },
    async getList () {
      this.loading = true
      const { datasetList, widgetList, botList } = this.$interface.reports
      const params = { "order": [{ "field": "update_date", "sort": "DESC" }], "filter": { "type": ["Custom"], "status": [], "modelNum": { "min": "", "max": null }, "lastSyncDate": { "from": "", "to": "" }, "createDate": { "from": "", "to": "" }, "updateDate": { "from": "", "to": "" }, "creator": [], "updateBy": [] }, "integrationGroup": [], "orderField": "", "page": null, "limit": null, "queryType": null, "showAllIntegration": false, "internal": false, "size": null, "current": 1, "name": "" }
      if (this.type === 'Widget') {
        params.size = 100000
      }
      const { data } = this.type === 'Dataset' ? await datasetList(params) : this.type === 'Widget' ? await widgetList(params) : await botList(params)
      let groupList = []
      let groupChildren = []
      this.value = []
      this.options = []
      const arr = this.type === 'Widget' ? data.data.records : data.data
      arr.forEach(item => {
        // if (item.id === this.defaultValue && this.value.length === 0) {
        //   this.value[0] = item.integration[0]
        //   this.value[1] = item.id
        //   // this.value[2] = item.status
        // }
        if (this.type === 'Widget') {
          item.integrationList.forEach(integration => {
            if (groupList.indexOf(integration.name) === -1) {
              groupList.push(integration.name)
              groupChildren[integration.name] = []
            }
            groupChildren[integration.name].push({
              value: this.type === 'Widget' ? item.gadgetId : item.id,
              label: item.name,
              datasetStatus: item.status,
              description: item.description
            })
          }
          )
        } else {
          item.integration.forEach(integration => {
            if (groupList.indexOf(integration) === -1) {
              groupList.push(integration)
              groupChildren[integration] = []
            }
            groupChildren[integration].push({
              value: this.type === 'Widget' ? item.gadgetId : item.id,
              label: item.name,
              datasetStatus: item.status,
              description: item.description
            })
          }
          )
        }
      })
      groupList.forEach(element => {
        this.options.push({
          value: element,
          label: element,
          children: groupChildren[element]
        })
      })
      this.loading = false
    }
  }
}
</script>

<style lang="scss">

</style>
